<template>

  <el-upload
    :multiple="false"
    :file-list="fileList"
    :on-success="handleSuccess"
    :on-remove="handleRemove"
    class="drag-upload"
    drag
    action="http://120.79.244.179:7897/upload/images/png">
    <i class="el-icon-upload"/>
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    <img v-if="fileList.length>0" :src="fileList[0].localUrl" >
  </el-upload>
</template>

<script>
export default {
  props: {
    imageUrl: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    handleSuccess(response, file, fileList) {
      var files = fileList.map(res => {
        if (res.name === file.name) {
          res.localUrl = URL.createObjectURL(file.raw)
          res.imageUrl = response.data[0]
          this.$emit('update:imageUrl', res.imageUrl)
        }
        return res
      })
      this.fileList = files
    },
    handleRemove(file, fileList) {
      this.fileList = fileList
    }
  }
}
</script>

<style >
  .drag-upload{
      display: grid;
      justify-content: center;
      justify-items: center;
  }
  .drag-upload img{
    width: 100%;
    height: 100%;
    /* position: absolute; */
    /* top: 0; */
    position: absolute;
    left: 0;
    top: 0;
  }
</style>
